<template lang="pug">
div
  nav-div
  div.flex.ja.ac.wrap
    a.ui.card.pointer.square-card(v-link="{ name: 'optometrist', params: { id: optometrist.id } }", target="_blank", v-for="optometrist in optometrists | orderBy 'id' -1")
      .content.flex.jc.ac
        .header.center.aligned.break-all {{optometrist.name}}
</template>

<script>
import { getOptometrists } from '../../vuex/action'
import NavDiv from '../../modules/nav'

export default {
  name: 'optometrists',
  components: {
    NavDiv,
  },
  vuex: {
    getters: {
      optometrists: ({ optometrist }) => optometrist.optometrists,
    },
    actions: {
      getOptometrists,
    }
  },
  data () {
    return {
    }
  },
  ready () {
    $(this.$el).find('.dropdown').dropdown({
      on: 'hover'
    })
    catchError(async () => {
      await this.getOptometrists()
    })
  },
  methods: {
  },
}
</script>

<style lang="sass" scoped>

</style>
